// @ts-nocheck
import { Form, Button, Row, Col, Checkbox, Radio } from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import {
  Input,
  Select,
  TextArea,
  InputEdit,
  InputNumber,
  Help
} from '@/components'
import ReactJson from '@/components/ReactJsonView'
import styles from './index.module.less'
import { getType } from '@/utils'

const renderFitTypeItem = ({
  field,
  name,
  getFieldValue,
  getFieldsValue,
  setFieldsValue,
  setFields,
  resetFields,
}) => {
  const type = getFieldValue([field, name, 'type'])
  const fieldValue = [...getFieldValue(field)]
  const value = getFieldValue([field, name, 'default'])
  const onChange = val => {
    fieldValue[name]['default'] = val
    setFieldsValue({ field: fieldValue })
  }
  switch (type) {
    case 'number':
      return <InputNumber />
    case 'boolean':
      return (
        <Radio.Group
          options={[
            { label: 'true', value: true },
            { label: 'false', value: false }
          ]}
        />
      )
    case 'string':
      return <Input placeholder="请输入变量赋值" />
    case 'array':
      return <ReactJson json={value} onChange={onChange} />
    case 'object':
      return <ReactJson json={value} onChange={onChange} />
    default:
      return <Input placeholder="请输入变量赋值" />
  }
}

const AddVariablesFormItems = ({ field = 'formList', disabled }) => {
  const form = Form.useFormInstance()
  const handleTypeChange = (type, field, name) => {
    let value
    switch (type) {
      case 'number':
        value = 0
        break
      case 'string':
        value = ''
        break
      case 'boolean':
        value = true
        break
      case 'array':
        value = []
        break
      case 'object':
        value = {}
        break
      default:
        break
    }
    form.setFields([{ name: [field, name, 'default'], value, errors: null }])
  }
  return (
    <div className={styles['variable-card']}>
      <Form.List name={field}>
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map(({ key, name, ...restField }) => {
                return (
                  <div className="variable-card-item" key={key}>
                    <Row className="variable-card-header">
                      <Col span={12}>
                        <Form.Item
                          {...restField}
                          name={[name, 'display']}
                          rules={[
                            { required: true, message: '请输入变量名称' }
                          ]}
                        >
                          <InputEdit disabled={disabled} />
                        </Form.Item>
                      </Col>
                      <Col span={12} className="variable-card-delete-icon">
                        {!disabled && <DeleteOutlined onClick={() => remove(name)} />}
                      </Col>
                    </Row>

                    <Form.Item
                      {...restField}
                      label="变量标识"
                      name={[name, 'name']}
                      rules={[{ required: true, message: '请输入变量标识' }]}
                    >
                      <Input placeholder="请输入变量标识" />
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      wrapperCol={{ offset: 6 }}
                      name={[name, 'required']}
                      valuePropName="checked"
                    >
                      <Checkbox>是否必填</Checkbox>
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      label="数据类型"
                      name={[name, 'type']}
                      rules={[{ required: true, message: '请选择数据类型' }]}
                    >
                      <Select
                        placeholder="请选择数据类型"
                        options={[
                          { label: '数字', value: 'number' },
                          { label: '字符串', value: 'string' },
                          { label: '布尔', value: 'boolean' },
                          { label: '数组', value: 'array' },
                          { label: '对象', value: 'object' }
                        ]}
                      />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      label="变量描述"
                      name={[name, 'description']}
                    >
                      <TextArea placeholder="请输入描述信息" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      className={'form-item-with-extra'}
                      label="变量赋值"
                      name={[name, 'defined']}
                      valuePropName="checked"
                      extra={
                        <Help
                          title={
                            '变量赋值：即支持定义当前变量的赋值方式，默认支持在剧本编排中自动获取变量值，勾选后则在调度剧本时进行手动赋值'
                          }
                        />
                      }
                    >
                      <Checkbox>是否调度时赋值</Checkbox>
                    </Form.Item>
                  </div>
                )
              })}
              <Button
                type="dashed"
                onClick={() =>
                  add({ display: `变量${fields.length + 1}`, defined: 0 })
                }
                block
                icon={<PlusOutlined />}
              >
                添加变量
              </Button>
            </>
          )
        }}
      </Form.List>
    </div>
  )
}

export default AddVariablesFormItems
